<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>边框</title>

        <style type="text/css">
            .wrapper { width: 500px;  height: 300px ; margin: 15px auto ; background-color: #dfdfdf ; }

            .first {
                border-top: 10px solid blue ; /* 设置顶边边框的 粗细、样式、颜色 */
                border-bottom: 10px solid blue ;
                border-left: 10px solid red ;
                border-right: 10px solid red ;

                /* border-radius : 水平半径 / 垂直半径 ; */
                /* border-radius : 左上角 右上角 右下角 左下角 / 左上角 右上角 右下角 左下角 ; */
                /* border-radius : 50px 100px 150px 200px/50px 100px 150px 250px ; */
                border-radius: 30px ;
            }

            .second {
                border-top: 10px solid blue ; /* 设置顶边边框的 粗细、样式、颜色 */
                border-bottom: 10px solid blue ;
                border-left: 10px solid red ;
                border-right: 10px solid red ;
                border-radius: 50% ;
            }

            .third {
                width: 0px ;
                height: 0px ;
                border-top: 100px solid blue ; /* 设置顶边边框的 粗细、样式、颜色 */
                border-bottom: 100px solid blue ;
                border-left: 100px solid red ;
                border-right: 100px solid red ;
                border-radius: 50% ;
            }

        
        </style>

    </head>
    <body>

        <div class="wrapper first"></div>

        <div class="wrapper second"></div>

        <div class="wrapper third"></div>
        
    </body>
</html>